86:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 88:T169f,[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import DraggableButton from "./components/DraggableButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/DraggableButton.tsx" "use client" import { useState, useRef, useEffect } from "react" import { motion, useMotionValue, useTransform, useSpring, useAnimation } from "framer-motion" const DraggableButton = () => { const [quadrant, setQuadrant] = useState(1) const constraintsRef = useRef(null) const audioRef = useRef(null) const x = useMotionValue(0) const y = useMotionValue(0) const rotateX = useTransform(y, [-200, 200], [15, -15]) const rotateY = useTransform(x, [-200, 200], [-15, 15]) const springConfig = { damping: 10, stiffness: 100 } const scaleSpring = useSpring(1, springConfig) const controls = useAnimation() useEffect(() => { audioRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() }, []) const playSound = (frequency: number, duration: number) => { if (audioRef.current) { const oscillator = audioRef.current.createOscillator() const gainNode = audioRef.current.createGain() oscillator.connect(gainNode) gainNode.connect(audioRef.current.destination) oscillator.frequency.value = frequency oscillator.type = "sine" gainNode.gain.setValueAtTime(0.7, audioRef.current.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.00001, audioRef.current.currentTime + duration) oscillator.start() oscillator.stop(audioRef.current.currentTime + duration) } } const handleDragStart = () => { playSound(330, 0.1) // Play a higher pitch sound when starting to drag scaleSpring.set(1.1) } const handleDragEnd = (event: any, info: any) => { playSound(220, 0.2) // Play a lower pitch sound when dropping scaleSpring.set(1) const newQuadrant = getQuadrant(x.get(), y.get()) setQuadrant(newQuadrant) // Wobble effect controls.start({ rotate: [0, -5, 5, -5, 5, 0], transition: { duration: 0.5 }, }) // Tilt based on velocity const tiltX = -info.velocity.y * 0.2 const tiltY = info.velocity.x * 0.2 controls.start({ rotateX: tiltX, rotateY: tiltY, transition: { duration: 0.5 } }) } const getQuadrant = (x: number, y: number) => { if (x >= 0 && y >= 0) return 1 if (x < 0 && y >= 0) return 2 if (x < 0 && y < 0) return 3 return 4 } const getBackgroundColor = () => { switch (quadrant) { case 1: return "bg-red-500" case 2: return "bg-blue-500" case 3: return "bg-green-500" case 4: return "bg-yellow-500" default: return "bg-gray-500" } } return (

{/* X and Y axes */}

Just Ship It

) } export default DraggableButton [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { red: { 500: "#EF4444", }, blue: { 500: "#3B82F6", }, green: { 500: "#10B981", }, yellow: { 500: "#F59E0B", }, gray: { 100: "#F3F4F6", 300: "#D1D5DB", 500: "#6B7280", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } 7c:["$","$L86",null,{"chatId":"yuv1Fj677Pg","children":["$","$L87",null,{"data":{"@\"active-block\",\"yuv1Fj677Pg\",":{"id":"b_UuJMIaE6Mfo","messageId":"RTvbbT9i1fx1bYwsOwKB1xBgofjfM6wD","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"interactive-button","type":"code-project","project":"interactive-button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"yuv1Fj677Pg\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This